<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.copy-btn {
	padding-left: 4px;
	cursor: pointer;
}

.viewer-container {
	z-index: 9999 !important;
}
</style>
</head>
<body>
	<script src="https://cdn.jsdelivr.net/npm/dayjs@1.7.8/dayjs.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/viewerjs@1.3.3/dist/viewer.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.3.3/dist/viewer.min.js"></script>
	<div th:replace="common/header::html"></div>
	<div id="q-app">
		<q-dialog persistent v-model="showSettingDialogFlag"> <q-card style="min-width: 580px;"> <q-card-section class="row items-center q-pb-none">
		<div class="text-h6">奖励设置</div>
		<q-space></q-space> <q-btn icon="close" flat round dense v-close-popup></q-btn> </q-card-section> <q-card-section class="q-pt-none"> <q-markup-table style="height: 400px"> <template>
		<thead>
			<tr>
				<th class="text-left">有效邀请人数</th>
				<th class="text-left">奖励的艺术品</th>
				<th class="text-left">操作</th>
			</tr>
		</thead>
		</template> <template>
		<tbody>
			<tr v-for="(invitedRequire, index) in invitedRequires">
				<td class="text-left"><q-input outlined type="number" v-model.number="invitedRequire.invitedCount" :dense="true"></q-input></td>
				<td class="text-left"><q-select outlined style="min-width: 300px; max-width: 300px" v-model="invitedRequire.rewardArtworkId" emit-value map-options :options="collections" option-value=id
						option-label="name" :dense="true"> <template v-slot:option="scope"> <q-item v-bind="scope.itemProps" v-on="scope.itemEvents"> <q-item-section avatar>
					<img :src="scope.opt.cover" style="height: 30px; width: 30px; object-fit: contain;"> </q-item-section> <q-item-section> <q-item-label>{{ scope.opt.name }}</q-item-label> </q-item-section> </q-item> </template> </q-select></td>
				<td class="text-left">
					<div class="q-gutter-sm">
						<q-btn color="primary" label="删除" @click="removeInvitedRequire(index)"></q-btn>
					</div>
				</td>
			</tr>
		</tbody>
		</template> </q-markup-table> </q-card-section> <q-card-actions>
		<div style="padding-right: 32px;">
			<q-checkbox outlined v-model="rewardFun" label="奖励功能" :dense="true"></q-checkbox>
			<div style="font-size: small;">会员在有效邀请人数达到要求即可获得</div>
		</div>
		<q-space></q-space> <q-btn label="保存" color="primary" @click="updateSetting"></q-btn> <q-btn label="新增" color="primary" @click="addInvitedRequire"></q-btn> </q-card-actions> </q-card> </q-dialog>
		<div class="q-pa-md">
			<q-table color="primary" :data="tableData" :columns="tableColumns" :pagination.sync="tablePagination" :rows-per-page-options="[10, 30, 50, 100]" :loading="tableDataLoading" @request="loadTableData">
			<template v-slot:top-left>
			<div class="q-gutter-md row query-cond">
				<q-input outlined v-model="mobile" label="会员手机号" :dense="true"></q-input>
				<q-select clearable outlined v-model="state" emit-value map-options :options="stateDictItems" option-value="dictItemCode" option-label="dictItemName" label="状态" :dense="true">
				</q-select>
				<q-btn color="primary" label="查询" icon="search" @click="refreshTable"></q-btn>
			</div>
			</template> <template v-slot:top-right>
			<div class="q-gutter-md row">
				<q-btn outline color="primary" label="邀请奖励设置" @click="showSettingDialog"></q-btn>
			</div>
			</template> <template v-slot:body-cell-member_info="props"> <q-td :props="props">
			<div>
				<div>手机号:{{props.row.memberMobile}}</div>
				<div style="display: flex; align-items: center;">
					区块链地址:<span class="hash-info">{{props.row.memberBlockChainAddr}}</span><span class="copy-btn" :data-clipboard-text="props.row.memberBlockChainAddr"><q-icon name="img:/images/copy.png"></q-icon></span>
				</div>
				<div>有效邀请人数:{{props.row.currnetMemberInvitedCount}}</div>
			</div>
			</q-td> </template> <template v-slot:body-cell-avatar_info="props"> <q-td :props="props">
			<div>
				<q-avatar> <img :src="props.row.avatar"> </q-avatar>
			</div>
			</q-td> </template> <template v-slot:loading> <q-inner-loading showing color="primary"></q-inner-loading> </template> </q-table>
		</div>
	</div>
	<script src="/js/invited-reward.js"></script>
</body>
</html>